<template>
  <div class="cardList-container">
    <!-- head return-->
    <van-nav-bar :title="$t('h.accPage.card.title')" style="background: #ededed">
      <template #left>
        <van-icon name="arrow-left" size="24" color="black" @click="$router.push({ name: 'acchome' })" />
      </template>
    </van-nav-bar>

    <div class="card-content">
      <div class="card-list" v-if="initCardList.length !== 0">
        <div class="card-box" v-for="item in cardList" :key="item.id">
          <div class="card-info">
            <div class="card-value">
              <Icon iconClass="cc-visa" className="visa-icon"></Icon>
              <div class="card-num">{{ item.number }}</div>
            </div>
            <div class="card-data">
              <div>有效至</div>
              <div>{{ item.cardDate }}</div>
            </div>
          </div>
          <div class="card-default">
            <div class="def-text">默认</div>
            <div>
              <van-switch v-model="item.isDefault" active-color="#ffbf05" inactive-color="white" @click="isDefault(item)" :disabled="item.isDefault ? true : false" />
            </div>
          </div>
          <div class="del-card">
            <div>
              <van-icon name="clear" color="#ffbf05" @click="delCard" />
            </div>
          </div>
        </div>
      </div>
      <van-empty v-show="initCardList.length === 0" description="暂无银行卡" />
      <van-button type="primary" block @click="$router.push({ name: 'addcard' })">添加银行卡</van-button>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'

export default {
  name: 'CardList',
  data() {
    return {
      initCardList: [],
      isFromOrder: false
    }
  },
  created() {
    // 初始化请求银行卡信息
    this.initCardData()
  },
  computed: {
    // 卡号隐藏处理
    cardList() {
      var arr = this.initCardList
      arr.forEach((item, i) => {
        // 银行卡号 每4位加 空格
        var num = item.number
          .replace(/\s/g, '')
          .replace(/[^\d]/g, '')
          .replace(/(\d{4})(?=\d)/g, '$1 ')
        // 将前12位替换为 * 号
        var str = num
        for (let i = 0; i < str.length; i++) {
          if (i < 14) {
            if (str[i] !== ' ') {
              str = str.replace(str[i], '*')
            }
          }
        }
        arr[i].number = str
      })
      return arr
    }
  },
  methods: {
    // 初始化银行卡、国家地区数据
    initCardData() {
      this.$load.start()
      this.$store.dispatch('getUserAssets').then(msg => {
        if (msg) return this.$msg.danger(msg + 'card_err1')
        this.$store.dispatch('getCountryList').then(msg => {
          if (msg) return this.$msg.danger(msg + 'country_err2')
          this.initCardList = this.$store.state.account.userAssets.creditCard
          this.$load.done()
        })
      })
    },
    // 设置默认信用卡
    isDefault(item) {
      if (item.isDefault === false) {
        this.initCardList.some((o, i) => {
          if (o.isDefault === true) {
            this.initCardList[i].isDefault = false
          }
        })
      }
    },
    // 删除信用卡
    delCard() {
      Dialog.confirm({
        title: '是否删除此卡？',
        message: ''
      })
        .then(() => {
          this.$msg.toast('删除失败')
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.cardList-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}
.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}
.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  .card-list {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 46px;
    width: 100%;
    padding: 0.6em 0;
    background: #ededed;
    .card-box {
      position: relative;
      display: flex;
      width: 96%;
      height: 120px;
      margin-top: 0.6em;
      background-color: #f7f7f7;
      box-shadow: 0px 0px 8px -3px #999999;
      border-radius: 9px;
      .card-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 65%;
        height: 100%;
        .card-value {
          display: flex;
          align-items: center;
          height: 20%;
          margin-top: 0.6em;
          margin-left: 0.6em;
          .visa-icon {
            font-size: 2.1em;
            margin-right: 0.3em;
          }
          .card-num {
            color: #545454;
            font-size: 1.1em;
          }
        }
        .card-data {
          display: flex;
          flex-direction: column;
          margin-bottom: 0.6em;
          margin-left: 3.3em;
          color: #ababab;
        }
      }
      .card-default {
        display: flex;
        align-items: center;
        width: 25%;
        .def-text {
          color: #ababab;
          margin-right: 0.6em;
        }
        .van-switch {
          display: flex;
          font-size: 1.1em;
        }
      }
      .del-card {
        width: 10%;
        height: 100%;
        .van-icon-clear {
          position: absolute;
          right: 0.3em;
          top: 0.3em;
          font-size: 1.5em;
        }
      }
    }
  }
  /deep/.van-button--primary {
    position: relative;
    background: #ffbf05;
    width: 96%;
    border: none;
    border-radius: 9px;
    font-size: 1em;
    margin: 3.6em 0;
  }
}
</style>
